<template>
	<view class="locations tab">
		<view class="nav nav-tabs">
			<view class="nav-tabs-group">
				<uni-segmented-control
					:current="tabIndex"
					:values="tabItems"
					style-type="button"
					active-color="#c4534c"
					@clickItem="bindChangeTab"/>
			</view>
		</view>
		<view class="tab-content">
			<view class="tab-pane" :class="{active: tabIndex == 0}">
				<view class="list">
					<view class="list-group">
						<view
							class="list-item"
							v-for="(jsd, index) in jsds"
							:key="index">
							<view class="thumbnail" @tap="openDetails(jsd.id)">
								<view class="thumbnail-header" @tap.stop.prevent="viewPic(jsd.images);">
									<image
										class="pic"
										mode="aspectFit"
										:src="jsd.images[0]">
									</image>
								</view>
								<view class="thumbnail-body">
									<view class="thumbnail-item">
										<view class="card" :class="{'card-a': jsd.srcLevel == 1, 'card-b': jsd.srcLevel == 2 && jsd.deptCode == 500000}">
											<text class="card-body">名称：{{ jsd.name }}</text>
											<image
												v-show="jsd.srcLevel == 1"
												class="card-icon"
												src="@/static/icon/iv_city_icon.png"
												mode="aspectFit" ></image>
											<image
												v-show="jsd.srcLevel == 2 && jsd.deptCode == 500000"
												class="card-icon" src="@/static/icon/gx.png"
												mode="aspectFit" ></image>
											</view>
										</view>
									<view class="thumbnail-item">
										位置：{{ jsd.address }}
									</view>
									<view class="thumbnail-item">
										责任单位：{{ jsd.deptname }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tab-pane" :class="{active: tabIndex == 1}">
				<view class="map-wrap">
					<map
						class="map"
						:latitude="latitude"
						:longitude="longitude"
						:markers="jsdPointers"
						scale="12"
						@markertap="handlerOpenDetails">
					</map>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
import { queryJsdList } from '@/api/configure.js';
import { deepClone, mergeUrls, previewImage } from '@/util/util.js';
import configUrl from '@/util/url.js';

export default {
	data() {
		return {
			tabItems: ['列表','地图'],
			tabIndex: 0,
			jsds: [],
			latitude: '',
			longitude: '',
			jsdPointers: []
		}
	},
	methods: {
		bindChangeTab(e) {
			this.tabIndex = e.currentIndex;
		},
		getJsdList() {
			let data = {
				businessId: '1'
			}

			queryJsdList(data).then((res) => {
				let jsds = res.data.slice(0);

				let jsdPointers = [];
				let latitude = '';
				let longitude = '';

				this.jsds = jsds.map((jsd, index) => {
					let coordinates = JSON.parse(jsd.gcjGeometry)['coordinates'];

					let pointer = {
						id: jsd.id,
						latitude: coordinates[1],
						longitude: coordinates[0],
						width: '20',
						height: '20',
						iconPath: '../../static/icon/iv_water.png',
						anchor: {x: .5, y: 1}
					}

					if(index == 0) {
						latitude = coordinates[1];
						longitude = coordinates[0];
					}

					jsdPointers.push(pointer);

					jsd.images = jsd.szbmJsdImageList.map((item) => {
						let path = configUrl.CASEIMAGE_URL + item.path;
						return path;
					})

					return jsd;
				})

				this.jsdPointers = jsdPointers.slice(0);
				this.latitude = latitude;
				this.longitude = longitude;
			})
		},
		viewPic(urls){
			previewImage({
				urls: urls
			})
		},
		openDetails(jsdId) {
			let jsdData = this.jsds.find( jsd => jsd.id == jsdId);

			let paths = jsdData.szbmJsdImageList.map(item => item.path);
			let points = jsdData.szbmJsdYsbzList.map(item => item.gcjGeometry);

			let point = JSON.parse(jsdData['gcjGeometry'])['coordinates'];

			let params = {
				latitude: point[1],
				longitude: point[0],
				jsdId: jsdData.id,
				name: jsdData.name,
				contact: jsdData.contact,
				address: jsdData.address,
				deptname: jsdData.deptname,
				phone: jsdData.phone,
				events: jsdData['params']['events']['value'],
				paths: JSON.stringify(paths),
				points: JSON.stringify(points)
			}

			let url = mergeUrls('/pages/floodControl/jsd', params);

			uni.navigateTo({
				url: url,
			})
		},
		handlerOpenDetails({detail: {markerId: jsdId}}) {
			this.openDetails(jsdId);
		},
		init() {
			this.getJsdList();
		}
	},
	onLoad() {
		this.init();
	},
	onReady() {

	}
}
</script>

<style lang="scss">
	.locations{
		background-color: #ffffff;
	}

	.nav-tabs-group{
		padding: 15px 30rpx;
		position: fixed;
		z-index: 99;
		top: 0px;
		left: 0px;
		right: 0px;
		background-color: #fff;
		/*  #ifdef H5 */
		margin-top: 44px;
		/* #endif */
	}
	.tab{
		.nav-tabs{
			height: 66px;
		}
	}

	.tab-content{
		.tab-pane{
			display: none;
			&.active{
				display: block;
			}
		}
	}

	.list{
		.list-group{
			.list-item{
				padding: 30rpx 30rpx;
			}
		}
	}

	.thumbnail{
		display: flex;
		.thumbnail-header{
			width: 160rpx;
			height: 160rpx;
			.pic{
				width: 100%;
				height: 100%;
			}
		}
		.thumbnail-body{
			padding: 0rpx 0rpx 0rpx 20rpx;
			width: calc(100% - 160rpx);
			box-sizing: border-box;
			.thumbnail-item{
				padding: 12rpx 0rpx;
				margin-bottom: 0rpx;
				font-size: 24rpx;
				line-height: 120%;
				color: #5d5d5d;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
			}
		}
	}

	.list{
		.list-group{
			.list-item{
				position: relative;
				top: 0px;
				left: 0px;
				position: relative;
				top: 0rpx;
				left: 0rpx;
				&:after{
					height: 1rpx;
					content: '';
					position: absolute;
					bottom: 0rpx;
					right: 0rpx;
					left: 0rpx;
					background-color:#bdbdbd;
					transform: scaleY(.5);
					opacity: 0.382;
				}
			}
		}
	}

	.card{
		display: inline-block;
		position: relative;
		.card-body{
			top: 0rpx;
			left: 0rpx;

		}
		.card-icon{
			position: absolute;
			top: 0rpx;
			right: 0rpx;
		}

		&.card-a{
			.card-body{
				padding-right: 40rpx;
			}
			.card-icon{
				width: 32rpx;
				height: 32rpx;
			}
		}

		&.card-b{
			.card-body{
				padding-right: 120rpx;
			}
			.card-icon{
				width: 120rpx;
				height: 32rpx;
			}
		}
	}

	.map-wrap{
		position: absolute;
		top: 66px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		.map{
			width: 100%;
			height: 100%;
		}
	}
</style>
